<template>
    <Versions></Versions>

    <svg class="hero-logo" viewBox="0 0 900 300">
        <use xlink:href="../../assets/icons.svg#electron" />
    </svg>
    <h2 class="hero-text">You've successfully created an Electron project with Vue</h2>
    <p class="hero-tagline">Please try pressing <code>F12</code> to open the devTool</p>

    <div class="features">
        <div class="feature-item">
            <article>
                <h2 class="title">Configuring</h2>
                <p class="detail">
                    Config with <span>electron.vite.config.js</span> and refer to the
                    <a target="_blank" href="https://electron-vite.org/config">config guide</a>.
                </p>
            </article>
        </div>
        <div class="feature-item">
            <article>
                <h2 class="title">HMR</h2>
                <p class="detail">
                    Edit <span>src/renderer</span> files to test HMR. See
                    <a target="_blank" href="https://electron-vite.org/guide/hmr.html">docs</a>.
                </p>
            </article>
        </div>
        <div class="feature-item">
            <article>
                <h2 class="title">Naive UI</h2>
                <p class="detail">
                    Run <span>Naive UI + vue3</span> to enable. See
                    <a target="_blank" href="https://www.naiveui.com/zh-CN/light">docs</a>.
                </p>
            </article>
        </div>
        <div class="feature-item">
            <article>
                <h2 class="title">Debugging</h2>
                <p class="detail">
                    Check out <span>.vscode/launch.json</span>. See
                    <a target="_blank" href="https://electron-vite.org/guide/debugging.html">docs</a>.
                </p>
            </article>
        </div>
        <div class="feature-item">
            <article>
                <h2 class="title">Source Code Protection</h2>
                <p class="detail">
                    Supported via built-in plugin <span>bytecodePlugin</span>. See
                    <a target="_blank" href="https://electron-vite.org/guide/source-code-protection.html">
                        docs
                    </a>
                    .
                </p>
            </article>
        </div>
        <div class="feature-item">
            <article>
                <h2 class="title">Packaging</h2>
                <p class="detail">
                    Use
                    <a target="_blank" href="https://www.electron.build">electron-builder</a>
                    and pre-configured to pack your app.
                </p>
            </article>
        </div>
    </div>
</template>
  
  
<script setup>
import { ref } from "vue";
import { useMainStore } from "../../store/index";
// 组件
import Versions from "../../components/Versions.vue";
</script>
  
  
<style lang="scss" scoped></style>